<template>
	<view class="park-detail-container">
		<!-- 顶部图片 -->
		<view class="park-header">
			<image class="park-cover" :src="parkInfo.image" mode="aspectFill"></image>
			<view class="park-title">
				<text>{{ parkInfo.title }}</text>
				<view class="park-badge">{{ parkInfo.type === 'techpark' ? '科技园区' : parkInfo.type === 'innovation' ? '创新基地' : '研发中心' }}</view>
			</view>
		</view>
		
		<!-- 园区概要信息 -->
		<view class="park-summary">
			<view class="summary-item">
				<text class="summary-label">地理位置</text>
				<text class="summary-value">{{ parkInfo.location }}</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">建筑面积</text>
				<text class="summary-value">{{ parkInfo.area }}</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">入驻企业</text>
				<text class="summary-value">{{ parkInfo.companies }}</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">开园时间</text>
				<text class="summary-value">{{ parkInfo.openTime }}</text>
			</view>
		</view>
		
		<!-- 分隔标题 -->
		<view class="section-divider">
			<text class="divider-text">园区简介</text>
		</view>
		
		<!-- 园区简介 -->
		<view class="park-intro">
			<image class="intro-image" :src="parkInfo.introImage" mode="aspectFill"></image>
			<rich-text class="intro-text" :nodes="parkInfo.description"></rich-text>
		</view>
		
		<!-- 分隔标题 -->
		<view class="section-divider">
			<text class="divider-text">特色服务</text>
		</view>
		
		<!-- 特色服务 -->
		<view class="feature-services">
			<view class="service-item" v-for="(item, index) in parkInfo.services" :key="index">
				<view class="service-icon">
					<image :src="item.icon" mode="aspectFit"></image>
				</view>
				<view class="service-info">
					<text class="service-name">{{ item.name }}</text>
					<text class="service-desc">{{ item.description }}</text>
				</view>
			</view>
		</view>
		
		<!-- 分隔标题 -->
		<view class="section-divider">
			<text class="divider-text">交通指南</text>
		</view>
		
		<!-- 交通指南 -->
		<view class="traffic-guide">
			<view class="guide-item" v-for="(item, index) in parkInfo.trafficGuide" :key="index">
				<view class="guide-icon">{{ item.icon }}</view>
				<view class="guide-info">
					<text class="guide-title">{{ item.title }}</text>
					<text class="guide-content">{{ item.content }}</text>
				</view>
			</view>
			
			<view class="map-container">
				<image class="map-image" :src="parkInfo.mapImage" mode="aspectFill"></image>
				<view class="map-overlay" @click="openMap">
					<text class="map-text">查看地图导航</text>
				</view>
			</view>
		</view>
		
		<!-- 联系我们 -->
		<view class="contact-section">
			<view class="section-divider">
				<text class="divider-text">联系我们</text>
			</view>
			
			<view class="contact-info">
				<view class="contact-item">
					<text class="contact-icon">📞</text>
					<text class="contact-text">{{ parkInfo.contact.phone }}</text>
				</view>
				<view class="contact-item">
					<text class="contact-icon">📧</text>
					<text class="contact-text">{{ parkInfo.contact.email }}</text>
				</view>
				<view class="contact-item">
					<text class="contact-icon">📍</text>
					<text class="contact-text">{{ parkInfo.contact.address }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				title: '',
				parkInfo: {}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = parseInt(options.id)
			}
			if (options.title) {
				this.title = decodeURIComponent(options.title)
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: this.title
				})
			}
			
			// 加载园区数据
			this.loadParkInfo()
		},
		methods: {
			loadParkInfo() {
				// 根据ID获取不同园区的信息
				// 这里使用静态数据模拟
				const parkInfoData = {
					1: {
						title: '智慧科技产业园',
						type: 'techpark',
						image: '/static/tabbar/怕.jpeg',
						introImage: '/static/intro1.jpg',
						description: '<div style="line-height: 1.8; color: #333;">智慧科技产业园位于城市CBD核心区，是一座集科技创新、企业孵化、人才培养于一体的现代化综合产业园区。园区总占地面积约50万平方米，建筑面积约100万平方米，绿化率达40%。<br/><br/>园区采用智能化管理系统，包括智慧停车、智能门禁、能源管理等多项智能化服务，为入驻企业提供高效、便捷、舒适的办公环境。同时，园区内设有多功能会议中心、创新实验室、休闲娱乐区等配套设施，满足企业全方位需求。</div>',
						location: '上海市浦东新区张江高科技园区科苑路88号',
						area: '100万平方米',
						companies: '200+',
						openTime: '2018年5月',
						mapImage: '/static/map.jpg',
						services: [
							{
								name: '创业孵化服务',
								icon: '/static/icons/创业孵化.png',
								description: '提供创业辅导、项目路演、投融资对接等全链条孵化服务'
							},
							{
								name: '人才服务',
								icon: '/static/icons/人才服务平台.png',
								description: '提供人才引进、培训、住房补贴等优质人才服务'
							},
							{
								name: '政策咨询',
								icon: '/static/icons/政策咨询.png',
								description: '提供最新产业政策解读、申报指导和落地服务'
							},
							{
								name: '企业综合服务',
								icon: '/static/icons/综合服务.png',
								description: '提供工商注册、知识产权、法律咨询等企业发展服务'
							}
						],
						trafficGuide: [
							{
								icon: '🚇',
								title: '地铁',
								content: '2号线张江高科站，步行约10分钟'
							},
							{
								icon: '🚌',
								title: '公交',
								content: '983路、张江1路、浦东45路等多条线路'
							},
							{
								icon: '🚗',
								title: '自驾',
								content: '沪南高速 - 科苑路出口，园区内设有充足停车位'
							}
						],
						contact: {
							phone: '021-12345678',
							email: 'info@smartpark.com',
							address: '上海市浦东新区张江高科技园区科苑路88号'
						}
					},
					2: {
						title: '创新创业基地',
						type: 'innovation',
						image: '/static/banner2.png',
						introImage: '/static/intro2.png',
						description: '<div style="line-height: 1.8; color: #333;">创新创业基地为初创企业提供全方位的孵化服务，包括创业培训、投融资对接、市场推广等一站式服务。基地拥有开放式办公区、独立办公室、会议室、路演厅等多种办公空间，满足不同创业团队的需求。<br/><br/>基地定期举办创业沙龙、投资人见面会、技术交流会等活动，为创业者搭建交流合作平台。同时，基地还设有专业导师团队，为创业者提供商业模式、市场营销、财务管理等方面的专业指导。</div>',
						location: '北京市海淀区中关村科技园区南大街5号',
						area: '5万平方米',
						companies: '150+',
						openTime: '2020年3月',
						mapImage: '/static/map.jpg',
						services: [
							{
								name: '低成本办公空间',
								icon: '/static/icons/办公.png',
								description: '提供多种类型的办公空间，租金低至市场价50%'
							},
							{
								name: '创业培训',
								icon: '/static/icons/创业培训.png',
								description: '定期举办创业课程、经验分享会等培训活动'
							},
							{
								name: '投融资服务',
								icon: '/static/icons/投融资服务.png',
								description: '对接天使投资人、VC机构，提供融资顾问服务'
							},
							{
								name: '市场推广',
								icon: '/static/icons/市场推广.png',
								description: '提供品牌策划、媒体报道、产品推广等营销服务'
							}
						],
						trafficGuide: [
							{
								icon: '🚇',
								title: '地铁',
								content: '4号线中关村站，步行约5分钟'
							},
							{
								icon: '🚌',
								title: '公交',
								content: '386路、490路、特8路等多条线路'
							},
							{
								icon: '🚗',
								title: '自驾',
								content: '北五环 - 中关村南大街出口，基地内设有收费停车场'
							}
						],
						contact: {
							phone: '010-87654321',
							email: 'support@innovationbase.com',
							address: '北京市海淀区中关村科技园区南大街5号'
						}
					},
					3: {
						title: '研发中心',
						type: 'research',
						image: '/static/banner3.webp',
						introImage: '/static/intro3.webp',
						description: '<div style="line-height: 1.8; color: #333;">研发中心拥有先进的研发设备和实验室，致力于促进产学研结合，推动科技成果转化。中心配备了高性能计算集群、人工智能实验室、物联网测试平台等先进设施，为科研团队提供一流的研发环境。<br/><br/>中心与多所高校和科研院所建立了紧密的合作关系，搭建了产学研协同创新平台。同时，中心还设有技术转移办公室，为科技成果转化提供全流程服务，帮助科研项目实现产业化。</div>',
						location: '广东省深圳市南山区高新科技园区创新路1号',
						area: '3万平方米',
						companies: '50+',
						openTime: '2019年10月',
						mapImage: '/static/map.jpg',
						services: [
							{
								name: '实验室共享',
								icon: '/static/icons/实验室.png',
								description: '提供先进实验设备共享服务，降低研发成本'
							},
							{
								name: '技术咨询',
								icon: '/static/icons/技术咨询.png',
								description: '提供专业技术咨询，解决研发难题'
							},
							{
								name: '成果转化',
								icon: '/static/icons/成果转化服务.png',
								description: '提供专利申请、技术转让、产品孵化等成果转化服务'
							},
							{
								name: '产学研合作',
								icon: '/static/icons/协同.png',
								description: '对接高校、科研院所资源，促进产学研合作'
							}
						],
						trafficGuide: [
							{
								icon: '🚇',
								title: '地铁',
								content: '2号线高新园站，步行约8分钟'
							},
							{
								icon: '🚌',
								title: '公交',
								content: '81路、235路、36路等多条线路'
							},
							{
								icon: '🚗',
								title: '自驾',
								content: '南光高速 - 高新南出口，中心内设有免费停车场'
							}
						],
						contact: {
							phone: '0755-98765432',
							email: 'rd@researchcenter.com',
							address: '广东省深圳市南山区高新科技园区创新路1号'
						}
					}
				}
				
				if (this.id && parkInfoData[this.id]) {
					this.parkInfo = parkInfoData[this.id]
				} else {
					// 默认显示第一个园区信息
					this.parkInfo = parkInfoData[1]
				}
			},
			
			// 打开地图导航
			openMap() {
				uni.showToast({
					title: '地图导航功能开发中',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
.park-detail-container {
	background-color: #f8f8f8;
	min-height: 100vh;
	
	.park-header {
		position: relative;
		height: 400rpx;
		
		.park-cover {
			width: 100%;
			height: 100%;
		}
		
		.park-title {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 30rpx;
			background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.park-badge {
				font-size: 24rpx;
				padding: 6rpx 20rpx;
				background-color: rgba(255,255,255,0.3);
				border-radius: 30rpx;
				font-weight: normal;
			}
		}
	}
	
	.park-summary {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.summary-item {
			display: flex;
			padding: 15rpx 0;
			border-bottom: 1px solid #f5f5f5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.summary-label {
				width: 160rpx;
				color: #999;
				font-size: 28rpx;
			}
			
			.summary-value {
				flex: 1;
				color: #333;
				font-size: 28rpx;
			}
		}
	}
	
	.section-divider {
		position: relative;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		
		.divider-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			position: relative;
			padding-left: 20rpx;
			
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 30rpx;
				background-color: #2979ff;
				border-radius: 3rpx;
			}
		}
	}
	
	.park-intro {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.intro-image {
			width: 100%;
			height: 350rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
		
		.intro-text {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}
	}
	
	.feature-services {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.service-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.service-icon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #f5f7fa;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
			
			.service-info {
				flex: 1;
				
				.service-name {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.service-desc {
					font-size: 26rpx;
					color: #666;
					line-height: 1.4;
				}
			}
		}
	}
	
	.traffic-guide {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.guide-item {
			display: flex;
			margin-bottom: 20rpx;
			
			.guide-icon {
				font-size: 40rpx;
				margin-right: 20rpx;
				width: 60rpx;
				text-align: center;
			}
			
			.guide-info {
				flex: 1;
				
				.guide-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.guide-content {
					font-size: 26rpx;
					color: #666;
				}
			}
		}
		
		.map-container {
			margin-top: 30rpx;
			position: relative;
			
			.map-image {
				width: 100%;
				height: 300rpx;
				border-radius: 10rpx;
			}
			
			.map-overlay {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				background-color: rgba(41, 121, 255, 0.8);
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				
				.map-text {
					color: #fff;
					font-size: 24rpx;
				}
			}
		}
	}
	
	.contact-section {
		background-color: #fff;
		padding-bottom: 30rpx;
		
		.contact-info {
			padding: 0 30rpx;
			
			.contact-item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.contact-icon {
					width: 60rpx;
					font-size: 36rpx;
					margin-right: 20rpx;
				}
				
				.contact-text {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
}
</style> 